<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import SubmitBtn from '@/components/SubmitBtn.vue'
import uploadFile from '@/components/upload/index.vue'
import { uploadImgUrl } from '@/common/config.js'
import { logisticePlanPeriod } from '@/apis/dict.js'
import store from '@/store/index.js'

const formData = ref({
	planname: "", // 计划名称
	billno: "", // 单据号
	expectdate: "",
	period: "", // 时间段
	memo: "", // 备注内容
	operid: store.state.userid,// 用户id
})

// 初始化上传地址
const action = ref("")

onLoad(options => {
	if (!options.data) return
	const data = JSON.parse(options.data)
	uni.setNavigationBarTitle({ title: '编辑' })
	formData.value = { ...data }
	// 编辑模式下设置上传地址
	action.value = uploadImgUrl(data.id)
	// 文件数据获取由upload组件内部处理，无需在此处调用
})


// 获取时间段数据
const periodShow = ref(false)
const periodList = ref([])
const perioDefaultValue = ref([0])
const perioName = ref("")
const getDate = async () => {
	const res = await logisticePlanPeriod()
	periodList.value = res.data.map(item => {
		return {
			value: item.dictValue,
			label: item.dictLabel
		}
	})
	if (formData.value.id) {
		perioName.value = res.data.filter(item => item.dictValue == formData.value.period)[0].dictLabel
		perioDefaultValue.value = res.data.findIndex(item => item.dictValue == formData.value.period)
	}
}
const confirmPeriod = (val) => {
	formData.value.period = val[0].value
	perioName.value = val[0].label
}
getDate()

const selectDateShow = ref(false)
const handlerConfirmDate = (val) => {
	const { day, month, year } = val
	formData.value.expectdate = `${year}-${month}-${day}`
}

const confing = {
	api: '/logistics/inplan',
	isCustid:true,
	requiredFields: [{
		key: 'planname',
		name: '计划名称',
	},
	{
		key: 'expectdate',
		name: '预计到达时间',
		type: 'select'
	},
	{
		key: 'period',
		name: '时间段',
		type: 'select'
	}
	]
}
</script>

<template>
	<view class="carinfo page_container">
		<view class="content">
			<u-form :model="formData" label-width="200">
				<u-form-item label="计划名称:" required>
					<u-input v-model="formData.planname" placeholder="请输入计划名称" />
				</u-form-item>
				<u-form-item label="单据号:">
					<u-input v-model="formData.billno" placeholder="请输入单据号" />
				</u-form-item>
				<u-form-item label="预计到达时间:" required>
					<u-input @click="selectDateShow = true" disabled v-model="formData.expectdate" placeholder="请选择预计到达时间" />
				</u-form-item>
				<u-form-item label="时间段:" required>
					<u-input @click="periodShow = true" disabled v-model="perioName" placeholder="请选择时间段" />
				</u-form-item>
				<u-form-item label="备注:">
					<u-input v-model="formData.memo" placeholder="请输入备注" />
				</u-form-item>
				<!-- 使用上传组件，仅在formData.id存在时显示 -->
				<uploadFile :id="formData.id" :action="action" v-if="formData.id" />
			</u-form>
		</view>
		<u-picker v-model="selectDateShow" @confirm="handlerConfirmDate" mode="time"></u-picker>
		<u-select v-model="periodShow" :default-value="[perioDefaultValue]" :list="periodList"
			@confirm="confirmPeriod"></u-select>
		<SubmitBtn v-bind="confing" :formData="formData" />
	</view>
</template>

<style lang="scss" scoped>
.carinfo {
	min-height: 100vh;
	background: #f5f5f5;
	padding-top: 20rpx;

	.content {
		background: #fff !important;
		border-radius: 20rpx;
		padding: 0 40rpx;
		margin-bottom: 100rpx;
	}
}

::v-deep .uicon-plus {
	margin-top: 4rpx;
}

.more_list {
	width: 170rpx;
	padding-top: 30rpx;

	view {
		padding-bottom: 30rpx;
	}
}
</style>